<template>
    <div style="height: calc(100% - 197px);">
        <el-tabs style="width:100%;">
            <el-tab-pane label="全部" name="first"></el-tab-pane>
            <el-tab-pane label="服务器" name="second"></el-tab-pane>
            <el-tab-pane label="网络安全设备" name="third"></el-tab-pane>
            <el-tab-pane label="终端" name="fourth"></el-tab-pane>
            <el-tab-pane label="密码" name="five"></el-tab-pane>
            <el-tab-pane label="工作网楼层交换机" name="six"></el-tab-pane>
            <el-tab-pane label="IP地址规划" name="seven"></el-tab-pane>
            <el-tab-pane label="安可终端" name="eight"></el-tab-pane>
            <el-tab-pane label="打印机" name="nine"></el-tab-pane>
        </el-tabs>
        <el-main style="height: calc(100% - 50px);">
            <div style="margin:-20px 10px 10px 10px">
                <span style="color:#706f6f">告警类型:&nbsp;</span>
                <el-select v-model="value" clearable placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>


            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="jibie" label="级别">
                </el-table-column>
                <el-table-column prop="gaojingleixing" label="告警类型">
                </el-table-column>
                <el-table-column prop="zichanleixing" label="资产类型">
                </el-table-column>
                <el-table-column prop="gaojingyuan" label="告警源">
                </el-table-column>
                <el-table-column prop="gaojingneirong" label="告警内容">
                </el-table-column>
                <el-table-column prop="chanshengshijian" label="产生时间">
                </el-table-column>
                <el-table-column prop="chixushijian" label="已持续时间">
                </el-table-column>
                <el-table-column prop="chixushijian" label="操作">
                    <el-button type="text" size="small">删除</el-button>
                    <el-button type="text" size="small">修改</el-button>
                </el-table-column>
            </el-table>
        </el-main>
        <el-footer style="height:50px;">
            <div class="block">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100"
                    layout="total, sizes, prev, pager, next, jumper" :total="400">
                </el-pagination>
            </div>
        </el-footer>

    </div>
</template>

<script>
export default {
    data() {
        return {
            options: [
                {
                    value: '选项1',
                    label: '全部'
                },
                {
                    value: '选项2',
                    label: '服务器'
                },
                {
                    value: '选项3',
                    label: '储存'
                },
                {
                    value: '选项4',
                    label: '网络设备'
                },
                {
                    value: '选项5',
                    label: '机房环境'
                },
                {
                    value: '选项6',
                    label: '桌面PC'
                },
                {
                    value: '选项7',
                    label: '外设'
                },
            ],
            value: '',
            tableData: [
                {
                    jibie: '1',
                    gaojingleixing: '普通通电状态',
                    zichanleixing: '软件类-操作系统',
                    gaojingyuan: 'xxxxx操作系统',
                    gaojingneirong: 'IP地址异常',
                    chanshengshijian: '2023-2-2',
                    chixushijian: '22小时',
                },
                {
                    jibie: '1',
                    gaojingleixing: '普通通电状态',
                    zichanleixing: '软件类-操作系统',
                    gaojingyuan: 'xxxxx操作系统',
                    gaojingneirong: 'IP地址异常',
                    chanshengshijian: '2023-2-2',
                    chixushijian: '22小时',
                },

                // 其他对象数据
            ],
            currentPage1: 5,
            currentPage2: 5,
            currentPage3: 5,
            currentPage4: 4
        }
    },
    methods: {
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        }
    }
}
</script>

<style scoped>
.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
}

.el-icon-arrow-down {
    font-size: 12px;
}
</style>